<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'mortgage.label', default: 'Mortgage')}"/>
    <title>集中度风险</title>
    <style>
    .table>tbody>tr>td{
        vertical-align: middle;
    }
    @media screen and (min-width:1900px) and (max-width:1920px) {
        .flex{
            display: flex;justify-content: center;align-items: center;
        }
    }
    .select2-container .select2-choices .select2-search-field input,.select2-container .select2-choice,.select2-container .select2-choices{

        color: #999;
    }
    </style>
</head>

<body class="fixed-navbar fixed-sidebar">

<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>集中度风险</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                集中度风险
            </h2>
        </div>
    </div>
</div>

<div class="content animate-panel">
    <div class="row">
        <g:form method="POST" action="concentrationRisk" class="form-horizontal" role="form" id="form">
            <div class="hpanel hblue">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <button class="btn btn-primary btn-xs" type="submit" id="searchBtn"><i class="fa fa-search"></i> 查询</button>
                        <button class="btn btn-warning2 btn-xs" type="button" id="resetBtn">
                            <i class="fa fa-times"></i> 重置</button>
                    </div>
                    查询
                </div>
                <div class="panel-body seach-group" id="bug1">

                <div class="row">
                    <div class="form-group col-sm-4">
                        <label for="district" class="col-sm-3 control-label">城市</label>
                        <div class="col-sm-9">
                            <g:select class="form-control" name="city" id="city" from="${com.cindata.City.findAllByNameInList(new com.cindata.ComponentService().evaluate(com.cindata.Component.findByCode('showCity')), [sort: 'name', order: 'asc'])}" valueMessagePrefix="status" optionKey="zoneNumber" optionValue="name"
                                    value="${params?.city}" noSelection="${["-1": '请选择城市']}"/>
                        </div>
                    </div>
                    <div class="form-group col-sm-4">
                        <label for="district" class="col-sm-3 control-label">数据范围</label>
                        <div class="col-sm-9">
                            <g:select class="form-control" name="range" id="range" from="${['新楼盘数据','二手房数据']}" valueMessagePrefix="range" noSelection="${["null": '全部']}"/>
                        </div>
                    </div>

                </div>

                </div>

            </div>
        </g:form>
    </div>
    <div class="row">
        <div class="hpanel hgreen">
            <div class="panel-heading">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                押品分析
            </div>

            <div class="panel-body">
                <p>城市/行政区押品分布</p>
                <p>信达虚拟总行 押品分布在 <small class="text-danger">10</small> 个行政区，共 <small class="text-danger">5334</small> 件押品，其中在 <small class="text-success">余杭区</small> 的数量最多，有 <small class="text-danger">903</small> 件，占全量押品的 <small class="text-danger">16.93%</small>，其次为 <small class="text-success">下城区</small> 和 <small class="text-success">萧山区</small>，押品数量分别为 <small class="text-danger">709</small> 件和 <small class="text-danger">704</small> 件，分别占全量押品的 <small class="text-danger">13.29%</small> 和 <small class="text-danger">13.20%</small>；新房押品，共<small class="text-danger">200</small>件，在<small class="text-success">余杭区</small> 的数量最多，有<small class="text-danger">150</small> 件，占全量押品的 <small class="text-danger">6.93%</small>，二手房押品，共<small class="text-danger">5100</small>件，在<small class="text-success">余杭区</small> 的数量最多，有<small class="text-danger">1500</small> 件，占全量押品的 <small class="text-danger">20.93%</small>，</p>
                <p>小区级押品分布</p>
                <p>信达虚拟总行的全量押品分布在 <small class="text-danger">1205</small> 个小区中，押品数量最多的小区为 <small class="text-success">余杭区</small> 的 <small class="text-success">富力十号院</small> 和 <small class="text-success">余杭区</small> 的 <small class="text-success">富力西溪悦居</small> 两个小区，其中新楼盘，押品共120件和350件，分布占比 <small class="text-danger">5.61%</small> 和 <small class="text-danger">0.64%</small>，二手房押品，共<small class="text-danger">890</small>件和<small class="text-danger">700</small>件，分布占比 <small class="text-danger">5.61%</small> 和 <small class="text-danger">0.64%</small>。</p>
                <p><small class="text-success">top20小区押品数量</small></p>
            </div>

        </div>
    </div>

    <div class="row">
      <div class="panel-heading">
        集中度分析
      </div>
        <div class="hpanel hgreen">
            <div class="panel-heading hbuilt">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                胜古家园
            </div>

            <div class="panel-body">
                <p class="text-center">风险评级 <span class="text-danger">高风险</small></p>
                <p class="text-center">地址：北京市朝阳区北三环路安贞桥东北角胜古南里34号</p>
                <p class="text-center">该小区押品数量占该行总押品数量58%，由于该小区2018年2月20日的负面新闻，导致流通性下降，风险等级为高风险。</p>
                <p class="text-center">建议方案： 观察变现周期的平均值，通过交易活跃度处置押品，尽快调整押品数量集中度。</p>

                  <div class="table-responsive">
                    <table cellpadding="1" cellspacing="1" class="table table-striped table-bordered table-hover text-center"  id="esateTable">
                      <caption>环比指数</caption>
                      <thead>
                        <tr>
                          <g:sortableColumn property="externalId" title="挂牌量" class="" params="${params}"/>
                          <g:sortableColumn property="borrName" title="成交量"  class="" params="${params}"/>
                          <g:sortableColumn property="borridCardType" title="成交周期"  class="" params="${params}"/>
                          <g:sortableColumn property="borrIdCardNo" title="价格趋势"  class="" params="${params}"/>
                          <g:sortableColumn property="city" title="租售比"  class="" params="${params}"/>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-danger">月：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-danger">月：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-danger">月：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-success">月：10% <i class="fa fa-level-up"><a></td>
                          <td class="text-danger">月：-10% <i class="fa fa-level-down"><a></td>
                        </tr>
                        <tr>
                          <td class="text-danger">周：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-danger">周：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-danger">周：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-success">周：10% <i class="fa fa-level-up"><a></td>
                          <td class="text-danger">周：-10% <i class="fa fa-level-down"><a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <div class="text-left clearfix">
                    <div class="panel-heading">变现能力</div>
                      <div id="main_1" class="pull-left" style="width: 80%;height:283px;"></div>
                  </div>
                  <hr>

                  <div class="text-left clearfix">
                    <div class="panel-heading">风险趋势</div>
                    <div id="main_2" style="width: 100%;height: 420px;"></div>
                  </div>
                  <hr>


            </div>

        </div>
        <div class="hpanel hgreen">
            <div class="panel-heading hbuilt">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                胜古北里
            </div>

            <div class="panel-body">
                <p class="text-center">风险评级 <span class="text-warning">中风险</small></p>
                <p class="text-center">地址：北京市朝阳区北三环路安贞桥东北角胜古南里34号</p>
                <p class="text-center">该小区押品数量占该行总押品数量58%，由于该小区2018年2月20日的负面新闻，导致流通性下降，风险等级为高风险。</p>
                <p class="text-center">建议方案： 观察变现周期的平均值，通过交易活跃度处置押品，尽快调整押品数量集中度。</p>

                  <div class="table-responsive">
                    <table cellpadding="1" cellspacing="1" class="table table-striped table-bordered table-hover text-center"  id="esateTable">
                      <caption>环比指数</caption>
                      <thead>
                        <tr>
                          <g:sortableColumn property="externalId" title="挂牌量" class="" params="${params}"/>
                          <g:sortableColumn property="borrName" title="成交量"  class="" params="${params}"/>
                          <g:sortableColumn property="borridCardType" title="成交周期"  class="" params="${params}"/>
                          <g:sortableColumn property="borrIdCardNo" title="价格趋势"  class="" params="${params}"/>
                          <g:sortableColumn property="city" title="租售比"  class="" params="${params}"/>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-danger">月：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-danger">月：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-danger">月：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-success">月：10% <i class="fa fa-level-up"><a></td>
                          <td class="text-danger">月：-10% <i class="fa fa-level-down"><a></td>
                        </tr>
                        <tr>
                          <td class="text-danger">周：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-danger">周：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-danger">周：-10% <i class="fa fa-level-down"><a></td>
                          <td class="text-success">周：10% <i class="fa fa-level-up"><a></td>
                          <td class="text-danger">周：-10% <i class="fa fa-level-down"><a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <div class="text-left clearfix">
                    <div class="panel-heading">变现能力</div>
                      <div id="main_3" class="pull-left" style="width: 80%;height:283px;"></div>
                  </div>
                  <hr>

                  <div class="text-left clearfix">
                    <div class="panel-heading">风险趋势</div>
                    <div id="main_4" style="width: 100%;height: 420px;"></div>
                  </div>
                  <hr>


            </div>

        </div>
    </div>
</div>

</div>

<asset:javascript src="echarts/echarts-all-3.js" />
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main_1'));

    // 指定图表的配置项和数据
    var option1 = {
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: false,
            feature: {
                dataView: {
                    readOnly: false
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [{
            type: 'category',
            data: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            name: '时间尺度：变现周期',
            boundaryGap: true
        }],
        yAxis: [{
            type: 'value',
            scale: true,
            name: '价值尺度：折扣程度',
            boundaryGap: false
// 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。boundaryGap: ['20%', '20%']
        }
        ],
        series: [{
            data: [1,10,1,10,1,10,1],
            type: 'line',
            smooth: true,
            itemStyle : {
             normal : {
               lineStyle:{
                 color:'#DDDDDD'
               }
             }
            }
        },
         {
                data: [10,1,10,1,10,1,10],
                type: 'line',
                smooth: true,
                itemStyle : {
                 normal : {
                   lineStyle:{
                     color:'#A3F5A3'
                   }
                 }
                }
          }]
    };
        myChart1.setOption(option1);
</script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main_2'));

    // 指定图表的配置项和数据
    var option2 = {
          legend: {
            data: ['押品集中度', '小区评分']
        },
        xAxis: [{
            type: 'category',
            data: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
            // boundaryGap: true
        }],
        yAxis: [{
            type: 'value',
            scale: true
            // boundaryGap: false
// 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。boundaryGap: ['20%', '20%']
        }
        ],
        series: [{
            data: [120, 200, 150, 80, 70, 170, 200],
            name: '押品集中度',
            type: 'bar',
            smooth: true,
            itemStyle : {
             normal : {
                 color:'#DDDDDD'
             }
            }
        },
         {
                data: [140, 180, 90, 80, 50, 100, 120],
                name: '小区评分',
                type: 'bar',
                smooth: true,
                itemStyle : {
                 normal : {
                     color:'#A3F5A3'
                 }
                }
          }]
    };
        myChart2.setOption(option2);
</script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart3 = echarts.init(document.getElementById('main_3'));

    // 指定图表的配置项和数据
    var option3 = {
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: false,
            feature: {
                dataView: {
                    readOnly: false
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [{
            type: 'category',
            data: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            name: '时间尺度：变现周期',
            boundaryGap: true
        }],
        yAxis: [{
            type: 'value',
            scale: true,
            name: '价值尺度：折扣程度',
            boundaryGap: false
// 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。boundaryGap: ['20%', '20%']
        }
        ],
        series: [{
            data: [1,10,1,10,1,10,1],
            type: 'line',
            smooth: true,
            itemStyle : {
             normal : {
               lineStyle:{
                 color:'#DDDDDD'
               }
             }
            }
        },
         {
                data: [10,1,10,1,10,1,10],
                type: 'line',
                smooth: true,
                itemStyle : {
                 normal : {
                   lineStyle:{
                     color:'#A3F5A3'
                   }
                 }
                }
          }]
    };
        myChart3.setOption(option3);
</script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart4 = echarts.init(document.getElementById('main_4'));

    // 指定图表的配置项和数据
    var option4 = {
          legend: {
            data: ['押品集中度', '小区评分']
        },
        xAxis: [{
            type: 'category',
            data: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
            // boundaryGap: true
        }],
        yAxis: [{
            type: 'value',
            scale: true
            // boundaryGap: false
// 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。boundaryGap: ['20%', '20%']
        }
        ],
        series: [{
            data: [120, 200, 150, 80, 70, 170, 200],
            name: '押品集中度',
            type: 'bar',
            smooth: true,
            itemStyle : {
             normal : {
                 color:'#DDDDDD'
             }
            }
        },
         {
                data: [140, 180, 90, 80, 50, 100, 120],
                name: '小区评分',
                type: 'bar',
                smooth: true,
                itemStyle : {
                 normal : {
                     color:'#A3F5A3'
                 }
                }
          }]
    };
        myChart4.setOption(option4);
</script>


<g:javascript>

    //重置按钮
    $("#resetBtn").click(function () {
        $("#communityId").val("");
        $("#s2id_city span:first").html("请选择城市");
        $("#city").val("");
        $("#s2id_district span:first").html("请选择行政区");
        $("#district").val("");
        $("#sourceAddress").val("");
        $("#borrName").val("");
        $("#borrIdCardNo").val("");
        $("#s2id_borridCardType span:first").html("身份证");
    });
</g:javascript>

</body>
</html>
